Ext.onReady(function () {

    var writer = new Ext.data.JsonWriter({
        encode: true,
        writeAllFields: true
    });

    var proxy = new Ext.data.HttpProxy({
        api: {
            read: { url: 'rest/product', method: 'GET'    },
            create: { url: 'rest/product', method: 'POST'   },
            update: { url: 'rest/product', method: 'POST'   },
            destroy: { url: 'rest/product', method: 'DELETE' }
        }
    });

    var reader = new Ext.data.JsonReader({
            totalProperty: 'total',
            successProperty: 'success',
            idProperty: 'id',
            root: 'data',
            messageProperty: 'message'  // <-- New "messageProperty" meta-data
        });

    var store = Ext.create('Ext.data.Store', {
        id: "product",
        proxy: proxy,
        reader: reader,
        writer: writer,
        autoLoad: true
    });

    var editor = new Ext.ux.grid.RowEditor({
        saveText: 'Update'
    });

    var grid = Ext.create('Ext.grid.GridPanel', {
        store: store,
        columns: [
            {
                text: 'Id',
                flex: 1,
                dataIndex: 'id'
            },
            {
                text: 'Title',
                flex: 1,
                dataIndex: 'title'
            },
            {
                text: 'Price',
                flex: 1,
                dataIndex: 'price'
            }
        ],
        plugins: [editor],
        height: 350,
        frame: true,
        width: 1200,
        title: 'Products',
        renderTo: 'grid',
        tbar: [
            {
                iconCls: 'icon-user-add',
                text: 'Add Product',
                handler: function () {
                    var e = new grid.store.recordType({
                        title: '',
                        price: ''
                    });
                    editor.stopEditing();
                    store.insert(0, e);
                    grid.getView().refresh();
                    grid.getSelectionModel().selectRow(0);
                    editor.startEditing(0);
                }
            },
            {
                iconCls: 'icon-user-delete',
                text: 'Remove Contact',
                handler: function () {
                    editor.stopEditing();
                    var s = grid.getSelectionModel().getSelections();
                    for (var i = 0, r; r = s[i]; i++) {
                        store.remove(r);
                    }
                }
            },
            {
                iconCls: 'icon-user-save',
                text: 'Save All Modifications',
                handler: function () {
                    store.save();
                }
            }
        ]
    });
});